<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick()" type="border-card">
      <el-tab-pane label="核心数据" name="first">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.topicSl"
        ></statistics-data>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import StatisticsData from 'comp/StatisticsData';
  import { fieldCover } from '@/utils/field';
  export default {
    components: {
      StatisticsData,
    },
    data() {
      return {
        activeName: 'first',
        coreData: {},
        xAxis: [],
        yAxis: [],
        series: [],
        legend: [],
        flag: false,
        tableLoadData: [],
        tableHeadConfig: [],
        modelVal: '',
      };
    },
    created() {
      this.handleClick();
    },
    watch: {
      modelVal(newval) {
        var startTime = newval.dataVal[0];
        var endTime = newval.dataVal[1];
        var workType = newval.workType;
        this.handleClick(startTime, endTime, workType.toString());
      },
    },
    methods: {
      async handleClick(startTime, endTime, workType) {
        this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
        this.flag = false;
        this.tableLoadData = [];
        this.tableHeadConfig = [];
        this.legend = [];
        this.xAxis = [];
        this.yAxis = [];
        this.series = [];
        if (this.activeName == 'first') {
          await this.$service.StatisTopicConsumer().then((res) => {
            this.coreData.data = res;
          });
          this.$service
            .StatisTopicConsumerChart({
              startDate: startTime,
              endDate: endTime,
              workType: workType != undefined > 0 ? workType : '5,6',
            })
            .then((res) => {
              this.tableLoadData = [...res.dayData, ...res.otherData];
              this.tableHeadConfig = this.$ENUMS.topicConsume;
              this.legend = this.$ENUMS.topicConsumeLegend;
              var Cnts = [[], [], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.creationCnt);
                Cnts[1].push(item.creationDau);
                Cnts[2].push(item.ratio);
                Cnts[3].push(item.perCapita);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: 'line',
                  data: cnt,
                  yAxisIndex: index == 2 || index == 3 ? Cnts.length - 1 : null,
                };
                var y = {
                  type: 'value',
                  min: 0,
                  position: Cnts.length == index + 1 ? 'right' : 'left',
                };
                this.yAxis.push(y);
                this.series.push(serie);
                console.log(serie);
              });
              fieldCover(res.otherData, res.dayData);
              this.flag = true;
            })
            .catch((err) => {});
        }
      },
    },
  };
</script>
<style lang="less" scoped></style>
